<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>评论frm</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
	.aui-list-view .aui-list-view-cell:after {left: 0;}
	.info {
		overflow: hidden;
		padding-top: 5px;
		font-size: 0.8em;
	}
	#more, .more{
		margin-top: 5px;
		padding-bottom: 20px;
		text-align: center;
	}
	.aui-list-view {
		margin-bottom: 10px;
	}
	.aui-user-view-cell {
		padding: 11px 10px 11px 5px;
	}
	.aui-user-view-cell .aui-img-object.aui-pull-left {
		margin-right: 10px;
	}
	
	.aui-text-default {
		color: #333333 !important;
		word-break: break-all; word-wrap:break-word;
	}
	.ref {
	    background: #ffe none repeat scroll 0 0;
	    border: 1px solid #999;
	    color: #333333;
	    font-size: 14px;
	    margin: 0 0 4px;
	    padding: 3px;
	}
	h4 {
	    color: #2FA746;
	    font-size: 14px;
	    font-weight: normal;
	    margin: 0;
	    padding: 2px 0 0;
	}
	#replies{
		margin-top: 10px
	}
    </style>
</head>
<body>
    <div class="aui-content" id="content">
        <ul class="aui-user-view" id="list">
            <!--li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/523/1047279_50.jpg?t=1418696812000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">君遥</span>
                    <h5 class='aui-text-default'>最近猛的一下子手里抓到3个资源，不知道怎么选择了，一号女，长相一般普普通通或者说偏下，不过在北京有房，工作护士；二号女，韩国留学7年，硕士毕业，北京工作金融方面；三号女，年纪小，92年，长相偏上，护士工作。这个，我该怎么选择。。。</h5>
				    <p class='aui-text-default'><b>-- 共有 <font>2</font> 条评论 --</b></p>
				    <p class='aui-text-default'>Jieven：这个答案 抨击了 为了图方便，盲目使用GUID的开发者。</p>
				    <p class='aui-text-default'>Peter_W：没什么新颖的想法</p>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
                </div>
            </li>
            <li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/523/1047279_50.jpg?t=1418696812000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">君遥</span>
                    <h5 class='aui-text-default'>
						<div class="ref">
								<div class="ref">
									<h4>引用来自“南湖船老大”的评论</h4>
									我觉得网易邮箱还是值得信任的。。网易邮箱的占有率那么大，怎么也有一半吧，是网易邮箱被盗号呢还是其他网站被盗号值得商榷。
									<br>
									我没有看到乌云的实际内容，不排除现在听风就是雨和夸大影响的论调。
								</div>
							<h4>引用来自“南湖船老大”的评论</h4>
							我刚才实际登陆了看了，是有一条17号的台湾的登录记录，所以额，有可能是真的。。。
						</div>
                    最近猛的一下子手里抓到3个资源，不知道怎么选择了，一号女，长相一般普普通通或者说偏下，不过在北京有房，工作护士；二号女，韩国留学7年，硕士毕业，北京工作金融方面；三号女，年纪小，92年，长相偏上，护士工作。这个，我该怎么选择。。。</h5>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
                </div>
            </li-->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	var UIChatBoxObj;
	var commentType = 'pub';	// pub：评论  reply：回复
	var authorid = 0;	// 被回复者id
	var catalog = 0;	// 文章类型
	var id = 0;			// 文章id
	var isPostToMyZone = 1;	// 是否转发到我的空间
	var replyid = 0;	// 被回复的那一条评论id
	var uid = $api.getStorage('user_uid');		// 发表评论人的id。也就是当前操作者(我)的id
	
	var pageParam;
	var page = 0, ajaxTag = 0;
    apiready = function () {
    	UIChatBoxObj = api.require('UIChatBox');
    	
    	pageParam = api.pageParam;
		
		catalog = pageParam.catalog;	// 设置文章类型
		id = pageParam.id;			// 设置文章id
		
		// 下拉刷新
		api.setRefreshHeaderInfo({
	        visible: true,
	        loadingImg: 'widget://image/ptr_pull.png',
	        bgColor: '#efeff4',
	        textColor: '#959595',
	        textDown: '下拉可刷新',
	        textUp: '松开立即刷新',
	        showTime: true
		}, function(ret, err){
			$api.html($api.byId('list'), '');
		    page = 0;
			// Window或者Frame页面滑动到底部事件,可用于实现滚动到底部，加载更多功能
			api.addEventListener({
			    name:'scrolltobottom',
			    extra:{
			        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
			    }
			},function(ret,err){
			    getList(page);
			});
		    //从服务器加载数据，完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
		    getList(page);
		});
		
		// 首次加载时设置下拉刷新组件为刷新中状态
		api.refreshHeaderLoading();
		
		openCommentBox();
		
    }
    
	/*
	 * 获取列表
	 * @param  integer pageIndex  	页码，第一页是从0开始的
	 */
	function getList(pageIndex){
		
		if(ajaxTag){
			return false;
		}

		var listhtml = '';
		var url = OpenAPI.comment_list + '&catalog=' + pageParam.catalog +'&id='+ pageParam.id +'&pageIndex=' + pageIndex;

	    var more = $api.byId("more");
	    if(more){
	        $api.text(more, '加载中...');
	    }
		
		ajaxTag = 1;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    tag: ajaxTag,
		    returnAll: false,
		},function(ret,err){
			ajaxTag = 0;
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
				    	var allCount = parseInt(ret.oschina.allCount); //总评论数 
				    	if( allCount==0 ){
				        	// 移除事件监听
							api.removeEventListener({
							    name: 'scrolltobottom'
							});
				    		$api.after($api.byId('list'), '<p id="more">暂无评论</p>');
				    		return false;
				    	}
						var lastPage = allCount/20;
						
						
						var more = $api.byId("more");
						if(more){
							 $api.remove(more);
						}
						if(typeof(ret.oschina.comments.comment.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
							ret.oschina.comments.comment = JSON.parse('['+JSON.stringify(ret.oschina.comments.comment)+']');
						}
				    	for(var i=0; i<ret.oschina.comments.comment.length; i++){

				    		var portrait = '../image/widget_dface.png';
				    		if(typeof(ret.oschina.comments.comment[i].portrait) == 'string' && ret.oschina.comments.comment[i].portrait.length > 0){
				    			portrait = ret.oschina.comments.comment[i].portrait;
				    		}
				    		
				    		// 评论包含引用
				    		var refHtml = '';
				    		if(typeof(ret.oschina.comments.comment[i].refers) == 'object'){
				    			var ret_obj = ret.oschina.comments.comment[i].refers.refer;
								if(typeof(ret_obj.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
									ret_obj = JSON.parse('['+JSON.stringify(ret_obj)+']');
								}

								for(var j = 0; j<ret_obj.length; j++){
									var refHtmlTemp = '';
									refHtmlTemp += '<div class="ref">';
									refHtmlTemp += refHtml;
									refHtmlTemp += '<h4>'+ret_obj[j].refertitle+'</h4>';
									refHtmlTemp += htmlspecialchars(ret_obj[j].referbody);
									refHtmlTemp += '</div>';
									refHtml = refHtmlTemp;
								}
							
				    		}
				    		
				    		// 评论包含回复（帖子类型）
				    		var repHtml = '';
				    		if(typeof(ret.oschina.comments.comment[i].replies) == 'object'){
				    			var ret_obj = ret.oschina.comments.comment[i].replies.reply;
								if(typeof(ret_obj.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
									ret_obj = JSON.parse('['+JSON.stringify(ret_obj)+']');
								}
								
								repHtml += '<p id="reply_'+ret.oschina.comments.comment[i].id+'" class="aui-text-default"><b>-- 共有  <font id="reply_count_'+ret.oschina.comments.comment[i].id+'">'+ret_obj.length+'</font> 条评论 --</b></p>';
								for(var j = 0; j<ret_obj.length; j++){
									repHtml +='<p class="aui-text-default">'+ret_obj[j].rauthor+'：'+ret_obj[j].rcontent+'</p>';
								}
				    		}
				    		
							listhtml += '<li class="aui-user-view-cell aui-img" tapmode onclick="set_reply('+ret.oschina.comments.comment[i].authorid+', \''+ret.oschina.comments.comment[i].author+'\', '+ret.oschina.comments.comment[i].id+')">';
							listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.comments.comment[i].authorid +' );event.cancelBubble=true;">';
							listhtml += '<div class="aui-img-body">';
							listhtml += '<span class="aui-text-primary">'+ ret.oschina.comments.comment[i].author +'</span>';
							listhtml += '<h5 id="content_'+ret.oschina.comments.comment[i].id+'" class="aui-text-default">';
							listhtml += refHtml;
							listhtml += htmlspecialchars(ret.oschina.comments.comment[i].content) +'</h5>';
							listhtml += repHtml;
							listhtml += '<a class="aui-pull-left">';
							listhtml += '<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+ friendly_time(ret.oschina.comments.comment[i].pubDate) +'　<font class="aui-iconfont aui-icon-mobile"></font> '+ getAppClientName(ret.oschina.comments.comment[i].appclient) +'</p>';
							listhtml += '</a>';
							listhtml += '</div>';
							listhtml += '</li>';
						}

				        if(pageIndex == 0){
				        	$api.html($api.byId('list'), listhtml);
				        }else{
				        	$api.append($api.byId('list'), listhtml);
				        }
				        page += 1;
				        if(page < lastPage){
				        	$api.after($api.byId('list'), '<p id="more" tapmode onclick="getList('+page+')">点击加载更多</p>');
				        }else{
				        	// 移除事件监听
							api.removeEventListener({
							    name: 'scrolltobottom'
							});
							
				        	$api.after($api.byId('list'), '<p id="more">全部加载完毕</p>');
				        }
				        
				    }else{
					    if(more){
					        $api.text(more, '加载失败，点击重试');
					    }
				        log(err.msg);
				    }
				});
		    }else {
			    if(more){
			        $api.text(more, '加载失败，点击重试');
			    }
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    api.refreshHeaderLoadDone();
		    setTimeout("api.parseTapmode()", 100);	// 等0.1秒在执行
		});
	}
	
	// 打开评论框
	function openCommentBox(){
		UIChatBoxObj.open({
		    placeholder: '说点什么',
		    maxRows: 4,
		    emotionPath: 'widget://image/UIChatBox/emotion',
		    styles: {
		        inputBar: {
		            borderColor: '#d9d9d9',
		            bgColor: '#f2f2f2'
		        },
		        inputBox: {
		            borderColor: '#B3B3B3',
		            bgColor: '#fdfdfd'
		        },
		        emotionBtn: {
		            normalImg: 'widget://image/UIChatBox/face1.png'
		        },
		        keyboardBtn: {
		            normalImg: 'widget://image/UIChatBox/key1.png'
		        },
		        indicator: {
		            target: 'both',
		            color: '#c4c4c4',
		            activeColor: '#9e9e9e'
		        }
		    },
		}, function(ret){			
		    //点击发送按钮
		    if(ret.eventType == 'send'){
				if( uid<1 ){
					api.toast({
					    msg: '请先登录',
					    duration:2000,
					    location: 'middle'
					});
					UIChatBoxObj.closeKeyboard();	// 收起键盘
					return false;
				}
				
				if( ret.msg.length<1 ){
					api.toast({
					    msg: '请填写内容',
					    duration:2000,
					    location: 'middle'
					});
					return false;
				}
		    
		        if( commentType=='pub' ){
		        	comment_pub( ret.msg );
		        }else if( commentType=='reply' ){
		        	comment_reply( ret.msg );
		        }
		    }
		});
	
	}
	
	// 提交评论
	function comment_pub( content ){
		var url = OpenAPI.comment_pub;
		api.ajax({
		    url: url,
		    method: 'post',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		    data:{
		        values: {
		        authorid: 0,
		        catalog: catalog,
		        id: id,
		        isPostToMyZone: isPostToMyZone,
		        replyid: 0,
		        uid: uid,
		        content: content,
		        },
		    }
		},function(ret,err){
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						if(typeof(ret.oschina.result.errorCode) != 'undefined' && parseInt(ret.oschina.result.errorCode)==1){
				    		var portrait = '../image/widget_dface.png';
				    		if(typeof(ret.oschina.comment.portrait) == 'string' && ret.oschina.comment.portrait.length > 0){
				    			portrait = ret.oschina.comment.portrait;
				    		}
							var listhtml = '<li class="aui-user-view-cell aui-img" tapmode onclick="set_reply('+ret.oschina.comment.authorid+', \''+ret.oschina.comment.author+'\', '+ret.oschina.comment.id+')">';
							listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.comment.authorid +' );event.cancelBubble=true;">';
							listhtml += '<div class="aui-img-body">';
							listhtml += '<span class="aui-text-primary">'+ ret.oschina.comment.author +'</span>';
							listhtml += '<h5 class="aui-text-default">';
							listhtml += htmlspecialchars(ret.oschina.comment.content) +'</h5>';
							listhtml += '<a class="aui-pull-left">';
							listhtml += '<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+ friendly_time(ret.oschina.comment.pubDate) +'　<font class="aui-iconfont aui-icon-mobile"></font> '+ getAppClientName() +'</p>';
							listhtml += '</a>';
							listhtml += '</div>';
							listhtml += '</li>';
							
							$api.prepend($api.byId('list'), listhtml);
							var more = $api.byId("more");
							if($api.text(more) == '暂无评论'){
								$api.text(more, '全部加载完毕');
							}
							scroll();
							setTimeout("api.parseTapmode()", 100);
						}else if( typeof(ret.oschina.result.errorMessage) != 'undefined' ){
							api.toast({
							    msg: ret.oschina.result.errorMessage,
							    duration:2000,
							    location: 'middle'
							});
						}
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    set_reply(0, '', replyid);	// 回复后重置评论框
		    UIChatBoxObj.closeKeyboard();	// 回复后收起键盘
		});
	}
	
	// 提交回复
	function comment_reply( content ){
		var url = OpenAPI.comment_reply;
		api.ajax({
		    url: url,
		    method: 'post',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		    data:{
		        values: {
		        authorid: authorid,
		        catalog: catalog,
		        id: id,
		        isPostToMyZone: isPostToMyZone,
		        replyid: replyid,
		        uid: uid,
		        content: content,
		        },
		    }
		},function(ret,err){
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						if(typeof(ret.oschina.result.errorCode) != 'undefined' && parseInt(ret.oschina.result.errorCode)==1){
				    		
				    		if( catalog==1 ){	// 新闻类的回复某人评论
				    		
					    		var portrait = '../image/widget_dface.png';
					    		if(typeof(ret.oschina.comment.portrait) == 'string' && ret.oschina.comment.portrait.length > 0){
					    			portrait = ret.oschina.comment.portrait;
					    		}
					    		
					    		// 评论包含引用
					    		var refHtml = '';
				    			var ret_obj = ret.oschina.comment.refers.refer;
								if(typeof(ret_obj.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
									ret_obj = JSON.parse('['+JSON.stringify(ret_obj)+']');
								}
								for(var i = 0; i<ret_obj.length; i++){
									var refHtmlTemp = '';
									refHtmlTemp += '<div class="ref">';
									refHtmlTemp += refHtml;
									refHtmlTemp += '<h4>'+ret_obj[i].refertitle+'</h4>';
									refHtmlTemp += htmlspecialchars(ret_obj[i].referbody);
									refHtmlTemp += '</div>';
									refHtml = refHtmlTemp;
								}
	
								var listhtml = '<li class="aui-user-view-cell aui-img" tapmode onclick="set_reply('+ret.oschina.comment.authorid+', \''+ret.oschina.comment.author+'\', '+ret.oschina.comment.id+')">';
								listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.comment.authorid +' );event.cancelBubble=true;">';
								listhtml += '<div class="aui-img-body">';
								listhtml += '<span class="aui-text-primary">'+ ret.oschina.comment.author +'</span>';
								listhtml += '<h5 class="aui-text-default">';
								listhtml += refHtml;
								listhtml += htmlspecialchars(ret.oschina.comment.content) +'</h5>';
								listhtml += '<a class="aui-pull-left">';
								listhtml += '<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+ friendly_time(ret.oschina.comment.pubDate) +'　<font class="aui-iconfont aui-icon-mobile"></font> '+ getAppClientName() +'</p>';
								listhtml += '</a>';
								listhtml += '</div>';
								listhtml += '</li>';
								$api.prepend($api.byId('list'), listhtml);
								scroll();
								setTimeout("api.parseTapmode()", 100);
				    		
				    		}else if( catalog==2 ){		// 帖子类的回复某人评论
					    		if(typeof(ret.oschina.comment.replies) == 'object'){
					    			var repHtml = '';
					    			var ret_obj = ret.oschina.comment.replies.reply;
									if(typeof(ret_obj.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
										ret_obj = JSON.parse('['+JSON.stringify(ret_obj)+']');
										repHtml += '<p id="reply_'+replyid+'" class="aui-text-default"><b>-- 共有 <font id="reply_count_'+replyid+'">1</font> 条评论 --</b></p>';
										$api.after($api.byId('content_'+replyid), repHtml);
										repHtml = '';
									}
									
									$api.text($api.byId('reply_count_'+replyid), ret_obj.length);
									
									repHtml +='<p class="aui-text-default">'+ret_obj[0].rauthor+'：'+ret_obj[0].rcontent+'</p>';
									$api.after($api.byId('reply_'+replyid), repHtml);
									scroll();
									setTimeout("api.parseTapmode()", 100);
					    		}
				    		}

						}else if( typeof(ret.oschina.result.errorMessage) != 'undefined' ){
							api.toast({
							    msg: ret.oschina.result.errorMessage,
							    duration:2000,
							    location: 'middle'
							});
						}
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    set_reply(0, '', replyid);	// 回复后重置评论框
		    UIChatBoxObj.closeKeyboard();	// 回复后收起键盘
		});
	}
	
	// 点击评论，设置回复评论
	function set_reply(author_id, author, reply_id){
		var placeholder = '';
		if( author_id!=0 && (replyid!=reply_id || commentType == 'pub') ){
			commentType = 'reply';
			authorid = author_id;	// 被回复者id
			replyid = reply_id;
			placeholder = '回复'+author+':';
		}else{
			commentType = 'pub';
			authorid = 0;	// 被回复者id
			replyid = 0;
			placeholder = '说点什么';
		}
		UIChatBoxObj.setPlaceholder({
		    placeholder: placeholder
		});
		UIChatBoxObj.popupKeyboard();
	}
</script>
</html>